<script setup lang="ts">
import { ref, watch, computed, onMounted } from 'vue'
import MyHumanRight from '@/components/PermissionsModule/Human/Group/MyHumanRight.vue'
import MyModuleAllRight from '@/components/PermissionsModule/Human/Group/MyModuleAllRight.vue'
import { roleStore } from '@/stores/role'
import { baseToolsStore } from '@/stores/baseTools'
import { headersStore } from '@/stores/apiHeader'
import { useDialogStore } from '@/stores/dialog'
const dialogStore = useDialogStore()
const { dialogInfo } = dialogStore
const store = roleStore() as any

const isDepartment = computed(() => baseToolsStore().isDepartment) //是否是部门
const { humanLevel } = store
// 1 全球 2 区域 3 国家
const newRole = ref(0)
newRole.value = humanLevel // 初始化面板权限
// 深度监听 store.panelPermissions
watch(
  () => store.humanLevel,
  (newVal) => {
    newRole.value = newVal
  }
)
//获取当前月份
const month = computed(() => {
  return headersStore().month
})
// 是否为集团总部
const isHeadquarters = computed(() => {
  return headersStore().scope_code === '0000100001'
})
const groupBoxRef = ref(null)
const groupBoxRef2 = ref(null)
const showMore = ref(
  (month.value == '00' && !isHeadquarters.value) || isDepartment.value
    ? true
    : false
)
const showMore2 = ref(!isDepartment.value ? true : false)
let timer = null

// 开始计时
const startTimer = () => {
  if (showMore.value && groupBoxRef.value) {
    timer = setInterval(() => {
      groupBoxRef?.value?.hidden('r-box')
    }, 30000)
  } else if (showMore2.value && groupBoxRef2.value) {
    timer = setInterval(() => {
      groupBoxRef2?.value?.hidden('r-box')
    }, 30000)
  }
}

// 重置计时
const resetTimer = () => {
  clearTimeout(timer)
  if (!dialogInfo.visible) {
    startTimer()
  }
}
window.addEventListener('mousemove', resetTimer)
window.addEventListener('keydown', resetTimer)
window.addEventListener('click', resetTimer)
onMounted(() => {
  startTimer()
})
</script>

<template>
  <GroupBox
    pName="r-box"
    transition="right"
    ref="groupBoxRef"
    :title="$t('bi_humanresources_emp')"
    :showMore="showMore"
  >
    <template #title> {{ $t('bi_humanresources_emp') }}</template>
    <template #first>
      <MyHumanRight />
    </template>
    <template #second>
      <MyHumanRight :showRemainingComponents="true" />
    </template>
  </GroupBox>
  <GroupBox
    pName="r-box"
    transition="right"
    ref="groupBoxRef2"
    :showMore2="showMore2"
    :title="$t('bi_humanresources_performanceoverview')"
    v-if="!isHeadquarters"
  >
    <template #title>
      {{ $t('bi_humanresources_performanceoverview') }}</template
    >
    <template #first>
      <MyModuleAllRight />
    </template>
    <template #second>
      <MyModuleAllRight :showRemainingComponents="true" />
    </template>
  </GroupBox>
</template>
<style lang="scss" scoped>
.carousel {
  width: 100%;

  :deep(.el-carousel__container) {
    height: 297px;
  }
}
</style>
